<script setup lang='ts'>
import formatDate from '@/utils/formatDate'
defineProps({
  tag: {
    type: String,
    default: 'left',
  },
})
</script>
<template>
  <div class="time">{{ formatDate('2024-12-20 08:21:28') }}</div>
  <div class="chat-message" :class="{ 'chat-message-right': tag === 'right' }">
    <div class="head-image">
      <div class="chat-image" v-if="false">
        <el-avatar
          shape="square"
          class="img"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          @error="() => true"
        >
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
      </div>
      <div class="chat-text" v-else>zh</div>
    </div>
    <div class="msg-content">
      <div class="msg-top">
        <span>用户名</span>
      </div>
      <div class="msg-bottom">
        <div class="msg-text">
          <span
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sapiente aspernatur
            debitis id eum enim cupiditate iusto minima accusamus obcaecati. Sequi architecto est
            dolore ullam possimus, delectus officiis alias a?Lorem, ipsum dolor sit amet consectetur
            adipisicing elit. Veritatis, voluptas harum asperiores magni blanditiis cumque
            consequatur facilis voluptates, sint suscipit quis voluptatibus, temporibus distinctio
            minus animi porro qui cum. NequeL,Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Molestiae aut pariatur optio. Rerum ipsam aliquam, tenetur sed soluta eum ut alias
            earum in qui aperiam assumenda eaque ducimus blanditiis saepe.</span
          >
        </div>
        <div class="msg-status">
          <span v-if="false">已读</span>
          <span v-else>未读</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.time {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 10px 0;
}
.chat-message {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  .head-image {
    display: flex;
    align-items: center;
    padding-left: 10px;
    .chat-image {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .chat-text {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      font-size: 14px;
      color: #333;
      margin-right: 10px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      user-select: none;
    }
  }
  .msg-content {
    flex: 1;
    .msg-top {
      font-size: 14px;
      color: #999;
    }
    .msg-bottom {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-top: 10px;
      .msg-text {
        position: relative;
        flex: 1;
        font-size: 16px;
        color: #333;
        background-color: #eee;
        width: fit-content;
        padding: 10px;
        max-width: 70%;
        word-break: break-all;
        text-align: left;
        border-radius: 5px;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          top: 10px;
          width: 0;
          height: 0;
          border-style: solid dashed dashed;
          border-color: #eee transparent transparent;
          overflow: hidden;
          border-width: 10px;
          z-index: -1;
        }
      }
      .msg-status {
        // margin-top: 10px;
        text-align: left;
        span {
          font-size: 12px;
          color: #999;
          //   margin-left: 10px;
        }
      }
    }
  }
}

.chat-message-right {
  display: flex;
  flex-direction: row-reverse;
  .head-image {
    padding-right: 10px;
    padding-left: 0;
    .chat-image {
      margin-right: 0;
      margin-left: 10px;
    }
    .chat-text {
      margin-right: 0;
      margin-left: 10px;
    }
  }
  .msg-content {
    .msg-top {
      text-align: right;
    }
    .msg-bottom {
      display: flex;
    }
  }
  .msg-content {
    text-align: right;
    .msg-bottom {
      align-items: end;
      .msg-text {
        background-color: #95ec69;
        &::after {
          left: auto;
          right: -8px;
          border-color: #95ec69 transparent transparent;
        }
      }
      .msg-status {
        text-align: right;
      }
    }
  }
}
</style>